<template>
  <div class="login">
    <van-nav-bar right-text="帮助" left-arrow @click-left="$router.go(-1)" />
    <div class="logo">
      <svg
        class="
          Mui-src-portals-mobile-components-Banner--src-portals-mobile-components-Banner-indextsx-logo
        "
        width="48"
        height="48"
        viewBox="0 0 48 48"
        fill="none"
      >
        <g id="48*48">
          <mask
            id="mask0"
            mask-type="alpha"
            maskUnits="userSpaceOnUse"
            x="0"
            y="0"
            width="48"
            height="48"
          >
            <path
              id="Clip 2"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M0 3.05176e-05H48V47.9998H0V3.05176e-05Z"
              fill="white"
            ></path>
          </mask>
          <g mask="url(#mask0)">
            <path
              id="Fill 1"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M42.9972 5.015C38.4683 0.503953 31.9571 0 24.0001 0C16.0329 0 9.51214 0.509889 4.98532 5.03265C0.459587 9.55464 0 16.0649 0 24.0234C0 31.9816 0.459587 38.4954 4.98719 43.018C9.51418 47.5421 16.0334 47.9998 24.0001 47.9998C31.9665 47.9998 38.4858 47.5421 43.013 43.018C47.5398 38.4939 48 31.9816 48 24.0234C48 16.0548 47.5343 9.53698 42.9972 5.015Z"
              fill="#FF6900"
            ></path>
            <path
              id="Fill 3"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M22.2335 32.8946C22.2335 33.0556 22.0979 33.1892 21.9328 33.1892H17.8394C17.6715 33.1892 17.5353 33.0556 17.5353 32.8946V22.19C17.5353 22.0276 17.6715 21.8946 17.8394 21.8946H21.9328C22.0979 21.8946 22.2335 22.0276 22.2335 22.19V32.8946Z"
              fill="white"
            ></path>
            <path
              id="Fill 5"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M30.248 32.8946C30.248 33.0556 30.1118 33.1892 29.9461 33.1892H26.0497C25.8826 33.1892 25.7464 33.0556 25.7464 32.8946V32.8546V23.6589C25.7423 22.0465 25.6501 20.3892 24.8177 19.5562C24.1019 18.8383 22.7672 18.6738 21.3787 18.6393H14.3157C14.149 18.6393 14.0144 18.7733 14.0144 18.9345V31.9287V32.8946C14.0144 33.0556 13.8769 33.1892 13.7102 33.1892H9.81124C9.64471 33.1892 9.51068 33.0556 9.51068 32.8946V15.1074C9.51068 14.9441 9.64471 14.8113 9.81124 14.8113H21.0604C24.0003 14.8113 27.0737 14.9454 28.5895 16.4632C30.1118 17.9877 30.248 21.0556 30.248 23.9989V32.8946Z"
              fill="white"
            ></path>
            <path
              id="Fill 7"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M38.2749 32.8946C38.2749 33.0556 38.1372 33.1892 37.9721 33.1892H34.0738C33.9072 33.1892 33.7718 33.0556 33.7718 32.8946V15.1074C33.7718 14.9441 33.9072 14.8113 34.0738 14.8113H37.9721C38.1372 14.8113 38.2749 14.9441 38.2749 15.1074V32.8946Z"
              fill="white"
            ></path>
          </g>
        </g>
      </svg>
      <div class="slogan">让每个人都能享受科技的乐趣</div>
    </div>
    <div class="form">
      <div class="info">小米帐号{{ type }}</div>
    </div>
    <van-form @submit="onSubmit" v-if="type == '登录'">
      <van-field
        v-model="username"
        name="username"
        placeholder="邮箱/手机号码/小米ID"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        name="password"
        type="password"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div class="agreement">
        <van-checkbox v-model="checkbox" shape="square" />
        <span>
          已阅读并同意小米帐号
          <a>用户协议</a>
          和
          <a>隐私政策</a>
        </span>
      </div>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :disabled="!checkbox"
          >登录</van-button
        >
      </div>
    </van-form>
    <van-form @submit="onSubmit" v-if="type == '注册'">
      <van-field
        v-model="username"
        name="username"
        placeholder="邮箱/手机号码/小米ID"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        name="password"
        type="password"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div class="agreement">
        <van-checkbox v-model="checkbox" shape="square" />
        <span>
          已阅读并同意小米帐号
          <a>用户协议</a>
          和
          <a>隐私政策</a>
        </span>
      </div>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :disabled="!checkbox"
          >{{ type }}</van-button
        >
      </div>
    </van-form>
    <div class="type">
      <span
        v-if="!(mold == 1)"
        @click="
          type = '登录';
          mold = 1;
        "
        >账号密码登录｜</span
      >
      <span
        v-if="!(mold == 2)"
        @click="
          type = '登录';
          mold = 2;
        "
        >手机号登录｜</span
      >
      <span
        v-if="!(mold == 3)"
        @click="
          type = '注册';
          mold = 3;
        "
        >立即注册 ｜</span
      >
      <span>忘记密码？</span>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import {
  Form,
  Field,
  Button,
  Checkbox,
  CheckboxGroup,
  NavBar,
  Toast,
} from "vant";
Vue.use(Form)
  .use(Field)
  .use(Button)
  .use(Checkbox)
  .use(CheckboxGroup)
  .use(NavBar);
export default {
  name: "login",
  data() {
    return {
      username: "",//账号
      password: "",//密码
      checkbox: false,//是否显示
      type: "登录",//状态
      mold: 1,//状态
    };
  },
  methods: {
    //登录注册
    onSubmit(values) {
      let account = JSON.parse(sessionStorage.getItem("account"));
      if (!account) {
        account = [];
      }
      if (this.type == "登录") {
        let index = account.findIndex(
          (ele) =>
            values.username == ele.username && values.password == ele.password
        );
        if (index == -1) {
          Toast("登录失败，用户名或密码错误");
          this.username = "";
          this.password = "";
        } else {
          window.sessionStorage.setItem("token", "123456");
          Toast("登录成功");
          this.$router.go(-1);
        }
      }
      if (this.type == "注册") {
        let index = account.findIndex(
          (ele) =>
            values.username !== ele.username && values.password !== ele.password
        );
        if (index !== -1) {
          Toast("注册失败，用户已存在");
          this.username = "";
          this.password = "";
          return;
        }
        account.push({ username: values.username, password: values.password });
        sessionStorage.setItem("account", JSON.stringify(account));
        Toast("注册成功");
        this.username = "";
        this.password = "";
        this.type = "登录";
        this.mold = 1;
      }
    },
  },
};
</script>
<style lang="less">
.login {
  width: 100vw;
  height: 100vh;
  .van-nav-bar {
    .van-icon {
      color: rgba(0, 0, 0, 0.5);
      font-size: 0.5rem;
    }
    .van-nav-bar__text {
      color: rgba(0, 0, 0, 0.5);
      font-size: 0.3rem;
    }
  }
  .van-hairline--bottom::after {
    border: none;
  }
  .agreement {
    display: flex;
    padding: 10px 0.55rem 0 0.55rem;
    .van-checkbox {
      margin-right: 0.11rem;
      .van-checkbox__icon {
        font-size: 0.4444444rem;
        border-radius: 50%;
        background-color: rgb(240, 240, 240);
        overflow: hidden;
        .van-icon-success {
          width: 0.4444444rem;
          border: none;
          height: 0.4444444rem;
        }
      }
    }
    & > span {
      line-height: 0.4444444rem;
      font-size: 0.264rem;
      color: rgba(0, 0, 0, 0.6);
      a {
        color: #0b84ff;
      }
    }
  }
  .type {
    color: rgba(0, 0, 0, 0.5);
    display: flex;
    font-size: 0.264rem;
    margin-top: 0.417rem;
    align-items: center;
    line-height: 0.354rem;
    justify-content: center;
  }
  .logo {
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-top: 1.5rem;
    flex-direction: column;
    padding-bottom: 1rem;
    background-size: cover;
    background-image: url(https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/background.d3d7d2dd.png);
    .slogan {
      color: rgba(0, 0, 0, 0.6);
      padding: 0 0.56rem;
      font-size: 0.2778rem;
      margin-top: 0.3rem;
      text-align: center;
      font-weight: normal;
      line-height: 0.368rem;
    }
  }
  .form {
    margin: 0 auto;
    padding: 0 0.55rem;
    box-sizing: border-box;
    .info {
      color: rgba(0, 0, 0, 1);
      font-size: 0.42rem;
      font-weight: 600;
      line-height: 0.55rem;
      margin-bottom: 0.21rem;
    }
  }
  .van-field__body {
    border: 0.0416rem solid rgba(255, 255, 255, 1);
    height: 1.11rem;
    padding: 0 0.2778rem;
    overflow: hidden;
    background: rgba(240, 240, 240, 1);
    border-radius: 0.368rem;
  }
  .van-field__error-message {
    font-size: 0.264rem;
    margin-top: 0.07rem;
    line-height: 0.35rem;
    margin-left: 0.32rem;
  }
}
</style>